<template>
    <div>
        <h3>我的{{$store.state.a.count}}</h3>


        <div class="btn">
           <button @click="fn">增加</button>&nbsp;&nbsp;
           <button @click="fn2">减少</button>
        </div>

        <h3>我的{{$store.state.b.count}}</h3>

        <div class="btn">
            <button @click="$store.commit('add')">增加</button>&nbsp;&nbsp;
            <button @click="$store.commit('reduce')">减少</button>
        </div>

    </div>
</template>

<script>

    // 1 引入状态文件;
    import store from '../../store';
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';

    export default {
        name: "about",
        data(){
            return {}
        },
        store,
        computed:{
            ...mapState(["count"])
        },
        methods:{
            ...mapMutations(['add','reduce']),
            ...mapActions(['asyn_add','asyn_reduce']),
            fn(){
                console.log(100);
                this.asyn_add();
                console.log(300);
            },
            fn2(){
                console.log(100);
                this.asyn_reduce();
                console.log(300);
            }
        }

    }

</script>

<style scoped>

</style>